/**
 * @file 在艾若的基础上剔除了非卡片的属性和dom, 主要扩展了extra, 用于detil展示.
 * @author ruanairuo(ruanairuo@baijia.com) | hanzhichen
 * @date 2020-01-07
 */
import React, {useMemo} from 'react';
import {Card, Button, Divider, Tooltip} from 'antd';
import {
    InfoCircleOutlined,
    DownloadOutlined,
    ReloadOutlined
} from '@ant-design/icons';
import './common.styl';

/** 扩展了extra, 显示详情/下载按钮, 并根据条件显示返回按钮 */
const DetailCard = props => {
    const {
        title,
        children,
        onDownload,
        onDetail,
        showBack,
        onBack,
        showBtn = true,
        ...otherProps
    } = props;

    // 接口需要的数据一样，但是还是写三个，任性
    const handleDetail = () => {
        typeof onDetail === 'function' && onDetail();
    };

    const handleBack = () => {
        typeof onBack === 'function' && onBack();
    };

    const handleDownload = () => {
        typeof onDownload === 'function' && onDownload();
    };

    const extra = useMemo(() => (
        <span className="detail-download">
            {showBack ? (
                <>
                    <Button
                        type="link"
                        onClick={handleBack}
                        icon={<ReloadOutlined />}
                    />
                </>
            ) : null}
            <Tooltip title="查看明细">
                <Button
                    type="link"
                    onClick={handleDetail}
                    icon={<InfoCircleOutlined />}
                />
            </Tooltip>
            <Tooltip title="下载">
                <Button
                    type="link"
                    onClick={handleDownload}
                    icon={<DownloadOutlined />}
                />
            </Tooltip>
        </span>
    ), [showBack, showBtn]);

    return (
        <Card
            {...otherProps}
            title={title}
            className="common-card"
            extra={showBtn ? (
                <span className="detail-download">
                    {showBack ? (
                        <>
                            <Button
                                type="link"
                                onClick={handleBack}
                                icon={<ReloadOutlined />}
                            />
                        </>
                    ) : null}
                    <Tooltip title="查看明细">
                        <Button
                            type="link"
                            onClick={handleDetail}
                            icon={<InfoCircleOutlined />}
                        />
                    </Tooltip>
                    <Tooltip title="下载">
                        <Button
                            type="link"
                            onClick={handleDownload}
                            icon={<DownloadOutlined />}
                        />
                    </Tooltip>
                </span>
            ) : null}
        >
            {children}
        </Card>
    );
};

export default DetailCard;
